import React, { useState,useEffect } from 'react';
import styles from "./index.module.scss";
import axios from "../../utils/request";
import { connect } from "react-redux";
import { List } from "react-virtualized";
import { changeCity } from '../../store/actions/cityList';
const CityList = ()=>{
    const [cityData,setCityData] = useState([]);
    const [letterList,setLetterList] = useState("");
    const [defaultInd,setDefaultInd] = useState(0);
    useEffect(() => {
        getCityList();
    }, [])
    const getHotCity = async ()=>{
       const result = await axios.get("/area/hot");
       return result;
    }
    console.log(getHotCity());
    const getCityList =async ()=>{
        const result = await axios({url:"/area/city",params:{level:1}});
        setCityData(result);
    }
    const createCityList = ()=>{
        cityData.sort((a,b)=>a.short>b.short?1:-1);
    }
    const getRightLetter = ()=>{
        let arr = new Set();
        cityData.forEach(item=>{
            arr.add(item.pinyin[0].toUpperCase())
        })
        console.log(arr,"右侧的字母");
    }
    getRightLetter();
    console.log(cityData,"城市数据");
    return <div className={styles.city_list}>
        <div className={styles.city_list_top}>
             <span>&lt;</span>
        <p>城市选择</p>
        <span></span>
        </div>
        <div className={styles.city_list_content}>
            <ul>
                {
                    cityData.map((item,index)=>{
                        return <li key={index}>{item.label}</li>
                    })
                }
            </ul>
        </div>
    </div>
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeStoreCity: (cityName) => {
            dispatch(changeCity(cityName))
        }
    }
}
export default connect(null,mapDispatchToProps)(CityList);